<template>
    <div class="accounting">
        <div class="nav-bar" :style="{ top: AppNavShow ? '3.5rem' : 0 }">
            <nuxt-link to="/user" class="left">
                <van-icon name="arrow-left" color="#000000" size="1.5rem" />
            </nuxt-link>
            <div class="centent">我的收藏</div>
            <div class="right"></div>
        </div>
        <div class="tabs">
            <van-tabs
                v-model="tabsIndex"
                title-active-color="#333333"
                background="transparent"
                color="#4291FF"
                line-width="1.25rem"
                @click="getMyCollect"
            >
                <van-tab
                    v-for="(item, index) in tabs"
                    :title="item.name"
                    :key="index"
                >
                </van-tab>
            </van-tabs>
        </div>

        <div class="list">
            <div
                v-for="(item, index) in dataList"
                :key="index"
                class="item text"
                @click="goD(item)"
            >
                {{ item.title ? item.title : item.name }}
            </div>
        </div>

        <div v-if="total > 10" class="page">
            <van-pagination
                v-model="page"
                :total-items="total"
                :show-page-size="3"
                :items-per-page="10"
                force-ellipses
                @change="changePage"
            />
        </div>
    </div>
</template>

<script>
import { ImagePreview, Dialog } from "vant";
import { mapState } from "vuex";
import { downLoadAPP } from "@/assets/utils/utils.js";
import { getMyCollect } from "@/assets/api/userCenterApi.js";
export default {
    async asyncData({ params, query }) {
        let data = {};

        return data;
    },

    head() {
        return {
            title: "个人中心-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            tabsIndex: 0,
            tabs: [
                {
                    name: "问题库",
                    type: 2,
                },
                {
                    name: "税收法规库",
                    type: 1,
                },
                {
                    name: "会计法规库",
                    type: 7,
                },
                // {
                //     name: "小竹学院",
                //     type: 3,
                // },
                {
                    name: "小竹问答",
                    type: 11,
                },
                {
                    name: "模板专区",
                    type: 9,
                },
                {
                    name: "小竹资讯",
                    type: 8,
                },
            ],
            page: 1,
            total: 0,
            dataList: [],
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            AppNavShow: (state) => state.AppNavShow,
        }),
    },
    created() {},
    mounted() {
        this.getMyCollect();
    },
    watch: {},
    methods: {
        async getMyCollect(index) {
            let item = this.tabs[this.tabsIndex];
            const res = await getMyCollect({
                limit: 10,
                page: this.page,
                type: item.type,
            });
            if (res.code == 1) {
                this.total = res.data.total;
                this.dataList = res.data.data;
            }
        },
        changePage(page) {
            this.page = page;
        },

        goD(item) {
            let res = this.tabs[this.tabsIndex];
            if (res.name == "问题库") {
                this.$router.push({
                    path: `/quizdata/${item.id}.html`,
                });
            } else if (res.name == "税收法规库") {
                this.$router.push({
                    path: `/ssfgk/${item.id}.html`,
                });
            } else if (res.name == "会计法规库") {
                this.$router.push({
                    path: `/kjfgk/${item.id}.html`,
                });
            } else if (res.name == "小竹问答") {
                this.$router.push({
                    path: `/cswd/${item.id}.html`,
                });
            } else if (res.name == "模板专区") {
                this.$router.push({
                    path: `/templates/${item.id}.html`,
                });
            } else if (res.name == "小竹资讯") {
                this.$router.push({
                    path: `/information/${item.id}.html`,
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.nav-bar {
    width: 100%;
    position: sticky;
    background-color: #ffffffff;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 2.75rem;
    .left,
    .right {
        width: 15%;
    }

    .centent {
        font-weight: 600;
        font-size: 1.31rem;
        color: #333333;
    }
}
.accounting {
    min-height: 100vh;
    background: #fafafa;
}

.text {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 控制显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list {
    width: 92%;
    margin: 0 auto;
    .item {
        margin-bottom: 0.8rem;
        padding-top: 0.8rem;
        border: 1px solid #fafafa;
        color: #333333;
        font-size: 0.9rem;
        line-height: 1.5;
    }
}

.page {
    width: 92%;
    margin: 0 auto;
    padding: 1rem 0;
}
</style>